<template>
  <div class="login">
    <div class="content">
      <div class="top">
        <div class="header">
          <img src="@/assets/img/logo.png" class="logo" />
          <span class="title">豆伴匠 Admin</span>
        </div>
        <div class="desc">
          豆伴匠 Admin 是全国目前最新最好用的中后台管理方案，且开源免费
        </div>
      </div>
      <div class="main">
        <el-form :model="formState" size="large">
          <el-form-item title="">
            <el-input
              v-model:value="formState.account"
              placeholder="请输入用户名"
            >
              <template #prefix>
                <el-icon tyle="color: rgba(0, 0, 0, 0.25)"><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item title="">
            <el-input
              type="password"
              v-model:value="formState.password"
              placeholder="请输入密码"
            >
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item :wrapper-col="{ span: 24 }">
            <el-button class="submit" type="primary" @click="onFinish"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="Login" setup>
import { useAppStore } from '@/store';
import { useRouter } from 'vue-router';

const router = useRouter();
const appStore = useAppStore();

const formState = reactive({
  account: 'admin',
  password: 'password',
});
const onFinish = async () => {
  await appStore.login(formState); // 同步用户信息
  router.push('/welcome');
};
</script>

<style lang="less" scoped>
@import url(./style.less);
</style>
